﻿@page "/Codes/{cipher}"
@using Tmp.Models
<RadzenCard>
    <RadzenStack>
        <RadzenTextBox @bind-Value="@_cipher" class="w-100"></RadzenTextBox>
        <RadzenButton Click="GoesTo" Text="前往" ButtonStyle="ButtonStyle.Primary"></RadzenButton>
    </RadzenStack>
</RadzenCard>
@if (_sharedCode == null && _isLoading)
{
    <RadzenProgressBarCircular ProgressBarStyle="ProgressBarStyle.Primary" Value="100" ShowValue="false" Mode="ProgressBarMode.Indeterminate"/>
}
else if (_sharedCode == null)
{
    <RadzenText Text="没有找到相关代码"></RadzenText>
}
else
{
    <style>
@{
    /* 使用C#代码块包裹媒体查询 */
    var mediaQuery = @"@media (max-width: 700px) { .wm { width: 100vw; } }
                                @media (min-width: 701px) {
      .wm {
        max-width: calc(100vw - 450px)!important;
      }
    }";

}

    @mediaQuery
</style>
    <RadzenCard>
        <pre class="wm col-12">
                                    <code class="hljs @_sharedCode.Language" @key="Cipher">
                                        @_sharedCode.Code
                                    </code>

                                </pre>


    </RadzenCard>
@code {

    [Parameter]
    public string? Cipher { get; set; }

    [Inject]
    private DataContext? DataContext { get; set; }

    private bool _isLoading = true;
    private SharedCode? _sharedCode;

    [Inject]
    private NavigationManager? NavigationManager { get; set; }

    private string? _cipher;

    private void GoesTo()
    {
        bool force = Cipher != _cipher;
        NavigationManager?.NavigateTo($"/Codes/{_cipher}", forceLoad: force);
    }

    protected async override Task OnInitializedAsync()
    {
        _sharedCode = DataContext.SharedCodes.FirstOrDefault(code => code.Cipher == Cipher);
        _isLoading = false;
        _cipher = Cipher;
    }

    [Inject]
    public IJSRuntime? JSRuntime { get; set; }

    protected override async Task OnAfterRenderAsync(bool asFirstRender)
    {
        if (asFirstRender)
        {
            await JSRuntime.InvokeVoidAsync("highlightCode");
        }
    }

}}